<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>同咨科技-商户后台</title>
	<meta name="renderer" content="webkit|ie-comp|ie-stand">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<meta http-equiv="Cache-Control" content="no-siteapp" />
	<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
	<link rel="stylesheet" href="../../static/css/weadmin.css">
	<link href="../../lib/layui/css/layui.css" rel="stylesheet">

	<script type="text/javascript" src="../../lib/layui/layui.js" charset="utf-8"></script>
	<script type="module" src="../components/use-body.js"></script>



	<link href="../../static/css/team.css" rel="stylesheet">
	<link href="../../static/css/uselay.css" rel="stylesheet">
</head>

<body>
	<use-body>
		<div class="page-body team">

			<!-- 左边菜单 -->
			<div class="side">
				<div class="back-page">
					<i class="iconfont use-arrow"></i> 返回造价大厅
				</div>
				<div class="layui-panel">
					<ul class="layui-menu" id="demo-menu">
						<li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: false}">
							<div class="layui-menu-body-title">我的项目</div>
							<ul>
								<li>
									<div class="layui-menu-body-title">企业的工程</div>
								</li>
							</ul>
						</li>
						<li class="layui-menu-item-divider"></li>
						<li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: false}">
							<div class="layui-menu-body-title">项目任务</div>
							<ul>
								<li class="layui-menu-item-checked">
									<div class="layui-menu-body-title">项目小组A</div>
								</li>
								<li>
									<div class="layui-menu-body-title">项目小组B</div>
								</li>
								<li>
									<div class="layui-menu-body-title">项目小组C</div>
								</li>
							</ul>
						</li>
					</ul>
				</div>
			</div>

			<!-- 主体 -->
			<div class="page-border">
				<!--搜索-->
					<form class="layui-form layui-row">
						<div class="table-toolbar small">
							<div class="left">
								<div class="layui-input-wrap">
									<div class="layui-input-prefix">
										<i class="iconfont use-search"></i>
									</div>
									<input type="text" name="A" value="" placeholder="Search..." autocomplete="off" class="layui-input" lay-affix="clear">
								</div>
								<button type="button"
									class="layui-btn layui-btn-primary layui-btn-radius">
									<i class="iconfont use-search"></i>
									搜索
								</button>
								<button type="button" lay-on="auth"
									class="layui-btn layui-btn-primary layui-btn-radius">
									<i class="iconfont use-screen"></i>
									筛选
									
								</button>
								<button type="button"
									class="layui-btn layui-btn-primary layui-btn-radius dropdown-base">
									<i class="iconfont use-sort"></i>
									排序
									<i class="layui-icon layui-icon-down layui-font-12"></i>
								</button>
	
							</div>
							<div class="right">
								<p class="layui-font-gray" style="margin-right: 15px;">15个项目</p>
								<button type="reset" class="layui-btn">新建项目</button>
							</div>
						</div>
					</form>
					

				<div class="divider"></div>

				<div class="table-data">
					<table class="layui-hide" id="ID-table-demo-data"></table>
				</div>
			</div>


		</div>
	</use-body>
</body>
<!-- 工具栏模板 -->
<script type="text/html" id="operate-btn">
    <div class="operate-btn">
      <i class="iconfont use-down layui-btn btn-text"></i>
			<i class="iconfont use-preview layui-btn btn-text"></i>
			<i class="iconfont use-delete layui-btn btn-text"></i>
    </div>
  </script>
<script>
	layui.use('table', function () {
		var $ = layui.$;
		var table = layui.table;
		var form = layui.form;
		// 已知数据渲染
		var inst = table.render({
			elem: '#ID-table-demo-data',
			cols: [[ //标题栏
				{ field: 'name', title: '工程项目名称', unresize: true, minWidth: 170, align: 'center' },
				{ field: 'area', title: '所在地区', unresize: true, minWidth: 200, align: 'center' },
				{ field: 'unit', title: '工程规模单位', unresize: true, width: 140, align: 'center' },
				{ field: 'projectScale', title: '工程规模', unresize: true, width: 140, align: 'center' },
				{ field: 'stage', title: '工程编制阶段', unresize: true, width: 140, align: 'center' },
				{ field: 'updated', title: '更新人', unresize: true, width: 140, align: 'center' },
				{ field: 'time', title: '更新时间', unresize: true, width: 170, align: 'center' },
				{ title: '操作', align: 'center', toolbar: '#operate-btn', unresize: true, width: 170, align: 'center', fixed: 'right', },
			]],
			data: [{ // 赋值已知数据
				"name": "*******项目",
				"area": "四川省成都市武侯区",
				"unit": "m²",
				"projectScale": "100",
				"stage": "****阶段",
				"updated": "路人甲",
				"time": "2023-03-12 15:33"
			}, { // 赋值已知数据
				"name": "*******项目",
				"area": "四川省成都市武侯区",
				"unit": "m²",
				"projectScale": "100",
				"stage": "****阶段",
				"updated": "路人甲",
				"time": "2023-03-12 15:33"
			}],
			skin: 'nob', // 表格风格
			//even: true,
			maxHeight: 'full-260',
			page: { // 支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
				layout: ['count', 'prev', 'page', 'next', 'limit',], //自定义分页布局
			},

			limit: 10 // 每页默认显示的数量
		});


		var dropdown = layui.dropdown;
  // 渲染
  dropdown.render({
    elem: '.dropdown-base', // 绑定元素选择器，此处指向 class 可同时绑定多个元素
    data: [{
      title: '手动排序',
      id: 100
    },{
      title: '按截止时间',
      id: 101
    },{
      title: '按创建时间',
      id: 102
    },{
      title: '按更新时间',
      id: 102
    },{
      title: '按优先级',
      id: 102
    }],
    click: function(obj){
      this.elem.find('span').text(obj.title);
    }
  });
	});
</script>

</html>